<template>
	<view class="bg-white e-p-20 e-m-b-20" v-if="groupInfo" :style="[AppSkinVar]">
		<view class="text-center e-m-b-40" v-if="type == 2">
			<text class="e-font-28 c-333" v-if="groupInfo.groupNum === groupInfo.nowNum">{{$t('spellgroup.groupsuccess')}}</text>
			<text v-else>{{$t('spellgroup.pleaseInvitatePeople')}} {{groupInfo.groupNum - groupInfo.nowNum}} {{$t('spellgroup.rct')}}</text>
		</view>
		<view v-else class="text-center e-m-b-40">
			<text>{{$t('spellgroup.hc')}} {{groupInfo.groupNum - groupInfo.nowNum}} {{$t('spellgroup.rct')}}</text>
			<text>，{{$t('spellgroup.paycansuccess')}}</text>
		</view>
		<scroll-view scroll-x="true">
			<view class="e-flex" :class="{'e-flex-around': groupInfo.groupNum < 6}">
				<view class="e-flex-column" :class="type === 1 ? 'flex-64':'flex-84'" v-for="(item, index) in groupInfo.headUrls" :key="index">
					<load-image mode="aspectFit" shape="circle" :size="[type === 1 ? '64rpx':'84rpx']"  :src="item" v-if="item">
					</load-image>
					<app-image mode="aspectFit"  :size="[type === 1 ? '64rpx':'84rpx']" src="default-headerImg.png" v-else />

					<view class="group-header bg-primary"  v-if="index === 0">
						<text class="c-white">{{$t('spellgroup.leader')}}</text>
					</view>
					<!-- <image v-if="index === 0" class="group-header" :src="$staticPath('group-header.png')" mode=""></image> -->
				</view>
				<image v-for="item in parseInt(groupInfo.groupNum - groupInfo.nowNum)" :key="item" :class="type === 1 ? 'img-64 flex-64':'img-84 flex-84'" :src="$staticPath('spell-surplus.png')" mode=""></image>
			</view>
		</scroll-view>
		
	</view>
	<view v-else class="e-p-40 h-320 e-flex e-flex-xy-center">
		<text class="e-font-28 c-666">{{$t('spellgroup.loading')}}</text>
	</view>
</template>

<script>
	export default {
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
		options: {
			virtualHost: true
		},
		// #endif
		props: {
			type: {
				type: Number,
				default:1
			},
			groupInfo:Object,
			surplus: {
				type:Number,
				default: 2
			}
		}
	}
</script>

<style lang="scss" scoped>
	.group-header {
		min-width: 72rpx;
		height: 32rpx;
		margin-top: -10rpx;
		font-size: 10px;
		border-radius: 30rpx;
		padding:0 15rpx;
		z-index: 2;
		text {
			// transform: rotate(.8);
			word-break: normal;
		}
	}
	.raidus-image {
		border-radius: 50%;
	}
	.h-320 {
		height: 310rpx;
	}
	.flex-84 {
		flex: 0 0 84rpx;
		margin-right: 20rpx;
	}
	.flex-64 {
		flex: 0 0 64rpx;
		margin-right: 20rpx;
	}
</style>